// 音乐人部分的动画

/* 整个网页的大盒子 */
.musician-dom {

   /* 网页内的内容盒子 */
   .musician-content-box {

      /* 内容主体区域 */
      .musician-content {

         /* 内容主体五部分 */
         .content-item5 {

            /* 第五部分内容 */
            .item5-content {

               // 内容盒子
               .item5-contentBox {

                  /* 共同样式 */
                  .common {
                     position: absolute;
                     top: 120px;
                     width: 1122px;
                     height: 400px;
                     overflow: hidden;
                     transition: all .2s;
                  }

                  .common1 {
                     top: 100px;
                  }

                  .common2 {
                     top: 80px;
                  }

                  /* 圆圈状态 */
                  .circular {
                     // background-color: #fff;

                     .cir {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 700px;
                        height: 700px;
                        background-color: #fcbcbc;
                        border-radius: 50%;
                        transition: all .3s;
                     }

                     /* 默认状态 */
                     .cir1 {
                        opacity: .1;
                        transform: translateX(-50%) scale(0);
                     }

                     .cir2 {
                        opacity: .3;
                        transform: translateX(-50%) scale(0);
                     }

                     .cir3 {
                        opacity: .3;
                        transform: translateX(-50%) scale(0);
                     }

                     .cir4 {
                        opacity: .5;
                        transform: translateX(-50%) scale(0);
                     }

                     .cir5 {
                        opacity: .5;
                        transform: translateX(-50%) scale(0);
                     }

                     .cir6 {
                        opacity: .8;
                        transform: translateX(-50%) scale(0);
                     }

                     /* 状态1 */
                     .cir1-1 {
                        opacity: .1;
                        transform: translateX(-50%) scale(0.8);
                     }

                     .cir2-1 {
                        opacity: .2;
                        transform: translateX(-50%) scale(0.7);
                     }

                     .cir3-1 {
                        opacity: .2;
                        transform: translateX(-50%) scale(0.6);
                     }

                     .cir4-1 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.5);
                     }

                     .cir5-1 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.4);
                     }

                     .cir6-1 {
                        opacity: .6;
                        transform: translateX(-50%) scale(0.3);
                     }

                     /* 状态2 */
                     .cir1-2 {
                        opacity: .1;
                        transform: translateX(-50%) scale(1);
                     }

                     .cir2-2 {
                        opacity: .2;
                        transform: translateX(-50%) scale(0.9);
                     }

                     .cir3-2 {
                        opacity: .2;
                        transform: translateX(-50%) scale(0.8);
                     }

                     .cir4-2 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.7);
                     }

                     .cir5-2 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.6);
                     }

                     .cir6-2 {
                        opacity: .6;
                        transform: translateX(-50%) scale(0.5);
                     }

                     /* 状态3 */
                     .cir1-3 {
                        opacity: .1;
                        transform: translateX(-50%) scale(1.15);
                     }

                     .cir2-3 {
                        opacity: .2;
                        transform: translateX(-50%) scale(1.05);
                     }

                     .cir3-3 {
                        opacity: .2;
                        transform: translateX(-50%) scale(0.95);
                     }

                     .cir4-3 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.85);
                     }

                     .cir5-3 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.75);
                     }

                     .cir6-3 {
                        opacity: .6;
                        transform: translateX(-50%) scale(0.65);
                     }

                     /* 状态4 */
                     .cir1-4 {
                        opacity: .1;
                        transform: translateX(-50%) scale(1.4);
                     }

                     .cir2-4 {
                        opacity: .2;
                        transform: translateX(-50%) scale(1.28);
                     }

                     .cir3-4 {
                        opacity: .2;
                        transform: translateX(-50%) scale(1.16);
                     }

                     .cir4-4 {
                        opacity: .4;
                        transform: translateX(-50%) scale(1.04);
                     }

                     .cir5-4 {
                        opacity: .4;
                        transform: translateX(-50%) scale(0.92);
                     }

                     .cir6-4 {
                        opacity: .6;
                        transform: translateX(-50%) scale(0.8);
                     }

                     /* 状态5 */
                     .cir1-5 {
                        opacity: .1;
                        transform: translateX(-50%) scale(1.6);
                     }

                     .cir2-5 {
                        opacity: .3;
                        transform: translateX(-50%) scale(1.45);
                     }

                     .cir3-5 {
                        opacity: .3;
                        transform: translateX(-50%) scale(1.3);
                     }

                     .cir4-5 {
                        opacity: .5;
                        transform: translateX(-50%) scale(1.15);
                     }

                     .cir5-5 {
                        opacity: .5;
                        transform: translateX(-50%) scale(1);
                     }

                     .cir6-5 {
                        opacity: .8;
                        transform: translateX(-50%) scale(0.85);
                     }
                  }

                  /* 头像 */
                  .fansbox {
                     background: transparent;

                     .fans {
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        transform: translate(-50%, 100%) scale(0);
                        transition: all .3s;
                     }

                     /* 默认状态 */
                     .fans1 {
                        width: 105px;
                        height: 105px;
                        background-image: url(../upload/musician-fans-1.png);
                     }

                     .fans2 {
                        width: 104px;
                        height: 104px;
                        background-image: url(../upload/musician-fans-2.png);
                     }

                     .fans3 {
                        width: 75px;
                        height: 75px;
                        background-image: url(../upload/musician-fans-3.png);
                     }

                     .fans4 {
                        width: 105px;
                        height: 105px;
                        background-image: url(../upload/musician-fans-4.png);
                     }

                     .fans5 {
                        width: 65px;
                        height: 65px;
                        background-image: url(../upload/musician-fans-5.png);
                     }

                     .fans6 {
                        width: 105px;
                        height: 105px;
                        background-image: url(../upload/musician-fans-6.png);
                     }

                     /* 状态1 */
                     .fans1-1 {
                        transform: translate(-80%, -20%) scale(0.4);
                     }

                     .fans2-1 {
                        transform: translate(-110%, 15%) scale(0.35);
                     }

                     .fans3-1 {
                        transform: translate(-200%, 40%) scale(0.5);
                     }

                     .fans4-1 {
                        transform: translate(75%, 35%) scale(0.32);
                     }

                     .fans5-1 {
                        transform: translate(35%, -28%) scale(0.5);
                     }

                     .fans6-1 {
                        transform: translate(65%, -10%) scale(0.42);
                     }

                     /* 状态2 */
                     .fans1-2 {
                        transform: translate(-105%, -45%) scale(0.5);
                     }

                     .fans2-2 {
                        transform: translate(-170%, -55%) scale(0.45);
                     }

                     .fans3-2 {
                        transform: translate(-250%, 25%) scale(0.6);
                     }

                     .fans4-2 {
                        transform: translate(120%, 25%) scale(0.40);
                     }

                     .fans5-2 {
                        transform: translate(30%, -110%) scale(0.70);
                     }

                     .fans6-2 {
                        transform: translate(40%, 0) scale(0.48);
                     }

                     /* 状态3 */
                     .fans1-3 {
                        transform: translate(-126%, -90%) scale(0.6);
                     }

                     .fans2-3 {
                        transform: translate(-220%, -65%) scale(0.38);
                     }

                     .fans3-3 {
                        transform: translate(-350%, 10%) scale(0.75);
                     }

                     .fans4-3 {
                        transform: translate(200%, 5%) scale(0.48);
                     }

                     .fans5-3 {
                        transform: translate(40%, -180%) scale(0.85);
                     }

                     .fans6-3 {
                        transform: translate(130%, -40%) scale(0.35);
                     }

                     /* 状态4 */
                     .fans1-4 {
                        transform: translate(-140%, -145%) scale(0.55);
                     }

                     .fans2-4 {
                        transform: translate(-270%, -160%) scale(0.7);
                     }

                     .fans3-4 {
                        transform: translate(-415%, -35%) scale(0.8);
                     }

                     .fans4-4 {
                        transform: translate(260%, -15%) scale(0.52);
                     }

                     .fans5-4 {
                        transform: translate(105%, -310%) scale(0.85);
                     }

                     .fans6-4 {
                        transform: translate(135%, -60%) scale(0.65);
                     }

                     /* 状态5 */
                     .fans1-5 {
                        transform: translate(-150%, -185%) scale(0.7);
                     }

                     .fans2-5 {
                        transform: translate(-300%, -200%) scale(0.73);
                     }

                     .fans3-5 {
                        transform: translate(-480%, -40%) scale(0.94);
                     }

                     .fans4-5 {
                        transform: translate(300%, -15%) scale(0.6);
                     }

                     .fans5-5 {
                        transform: translate(105%, -390%) scale(1.16);
                     }

                     .fans6-5 {
                        transform: translate(205%, -80%) scale(0.68);
                     }

                     /* 状态6 */
                     .fans1-6 {
                        transform: translate(-160%, -235%) scale(0.65);
                     }

                     .fans2-6 {
                        transform: translate(-330%, -220%) scale(0.68);
                     }

                     .fans3-6 {
                        transform: translate(-480%, -50%) scale(1);
                     }

                     .fans4-6 {
                        transform: translate(320%, -50%) scale(0.68);
                     }

                     .fans5-6 {
                        transform: translate(100%, -360%) scale(1.25);
                     }

                     .fans6-6 {
                        transform: translate(200%, -180%) scale(0.63);
                     }

                  }

                  /* 手机 */
                  .phonebox {
                     background: transparent;

                     .phone {
                        position: absolute;
                        width: 200px;
                        height: 400px;
                        left: 50%;
                        bottom: 0;
                        transform: translate(-50%, 50%) scale(0);
                        transition: all .3s;
                        background-image: url(../upload/musician-phone.png);
                        background-size: cover;
                        background-repeat: no-repeat;
                     }

                     .phone-1 {
                        transform: translate(-50%, 62%) scale(0.3);
                     }

                     .phone-2 {
                        transform: translate(-50%, 58%) scale(0.5);
                     }

                     .phone-3 {
                        transform: translate(-50%, 46%) scale(0.6);
                     }

                     .phone-4 {
                        transform: translate(-50%, 42%) scale(0.7);
                     }

                     .phone-5 {
                        transform: translate(-50%, 36%) scale(0.8);
                     }

                     .phone-6 {
                        transform: translate(-50%, 28%) scale(0.9);
                     }
                  }

               }
            }
         }
      }
   }
}